<template>
      <div class="page-container">
        <div class="filter-content">
          <div class="filter-item" style="width: 100% ">
            <div class="label-content"
                 style="display: flex !important;  justify-content: space-between !important;width: 100% ">
              <div>
                <el-select v-model.trim="baseTable.tableReqDto.status"
                           class="elliptical-select"
                           clearable
                           style="width: 150px" @change="baseTable.onSearch">
                  <el-option label="状态" value="all"/>
                  <el-option label="初始化" value="init"/>
                  <el-option label="监控中" value="running"/>
                  <el-option label="取消监控" value="cancel"/>
                </el-select>
                <el-input
                  clearable
                  v-model.trim="baseTable.tableReqDto.name"
                  class= "search-input-width elliptical-input"
                  placeholder="卖家名称搜索"
                  style="width: 150px;margin-left: 10px;"/>
                <el-button style="margin-left: 10px;height: 34px" :auto-insert-space="true"
                           type="primary" round @click="baseTable.onSearch">
                  <el-icon style="margin-right: 5px;height: 34px">
                    <Search/>
                  </el-icon>
                  搜索
                </el-button>
              </div>
              <div>
                <el-input   class= "search-input-width elliptical-input"  v-model.trim="monitorUrl" clearable autocomplete="off"
                          placeholder="卖家url示例：https://www.amazon.com/dp/asin" style="width: 400px"/>
                <el-button  round type="primary" :loading="state.monitorSubmitLoading"
                           @click="onMonitorUrl" style="background-color: #F59C25;border-color: #F59C25;margin-left: 10px"><el-icon style="margin-right: 5px"><Plus /></el-icon>添加监控
                </el-button>
                <el-button  round type="primary" :loading="state.monitorSubmitLoading"
                           @click="onOpenTest">连通性探测
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <el-col :span="24">
            <div class="store-tracker-dashborad hidden">
              <div class="store-tracker-dashborad-data-list">
                <div class="store-tracker-dashborad-data-item">
                  <span class="data-type">今日销售</span>
                  <div class="data">
                    <div class="data-item">
                      <em>0</em>
                    </div>
                  </div>
                </div>
                <div class="store-tracker-dashborad-data-item">
                  <span class="data-type">昨日销售</span>
                  <div class="data">
                    <div class="data-item">
                      <em>0</em>
                    </div>
                  </div>
                </div>
                <div class="store-tracker-dashborad-data-item">
                  <span class="data-type">7日销售</span>
                  <div class="data">
                    <div class="data-item"><em>0</em></div>
                  </div>
                </div>
                <div class="store-tracker-dashborad-data-item">
                  <span class="data-type">总销售</span>
                  <div class="data">
                    <div class="data-item"><em>0</em></div>
                  </div>
                </div>
              </div>
            </div>
            <el-table class="custom-header-table-2" v-loading="baseTable.tableLoading" :data="baseTable.tableData" stripe>
              <template v-for="col in baseTable.tableColumns" :key="col.colKey">
                <el-table-column
                  :header-align="col.align"
                  :fixed="col.fixed"
                  :align="col.align"
                  :prop="col.colKey"
                  :label="col.title"
                  :min-width="col.width">
                  <template #default="{ row, $index }">
                    <!-- 序号列处理 -->
                    <template v-if="col.colKey === 'index'">
                      {{ ($index + 1) }}
                    </template>
                    <template v-else-if="col.colKey === 'sellerAddress1'">
                      {{ row.sellerAddress.address }}
                    </template>
                    <template v-else-if="col.colKey === 'status'">
                      <el-tag :type="statusTypeMap[row.status]" effect="dark">{{
                          row.status
                        }}
                      </el-tag>
                      <div style="font-size: 12px" v-if="row.status === 'pause'"
                           v-text="row.errorMessage"></div>
                    </template>
                    <template v-if="col.colKey === 'sellerAddress'">
                      <div class="text">
                        <div>{{ row.sellerAddress.city }}</div>
                        <div>{{ row.sellerAddress.province }}</div>
                        <div>{{ row.sellerAddress.country }}</div>
                      </div>
                    </template>
                    <template v-else-if="col.colKey === 'reviews'">
                      <div class="text" v-text="'Score：' + row.reviews.value"></div>
                      <div class="text" v-text="'Ratings：' + row.reviews.count"></div>
                    </template>
                    <template v-else-if="col.colKey === 'sales'">
                      <div class="text" v-text="row.sales.count"></div>
                      <div class="text">
                        <fixed-amount :value="row.sales.value" width="120px"/>
                      </div>
                    </template>
                    <template v-else-if="col.colKey === 'opt'">
                      <div class="table-opt">
                        <el-tooltip effect="dark" content="查看详情" placement="top">
                          <el-link v-if="row.status !== 'cancel'" :underline="false"
                                   class="opt-item" @click="onMonitorDetail(row)" style="color: #6169FF">
                            详情
                          </el-link>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="取消监控" placement="top">
                          <el-link v-if="row.status !== 'cancel'" :underline="false"
                                   class="opt-item" @click="onCancelMonitor(row.id)">
                            取消监控
                          </el-link>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="重新监控" placement="top">
                          <el-link v-if="row.status === 'cancel'" :underline="false"
                                   class="opt-item" @click="onRunningMonitor(row.id)">
                            重新监控
                          </el-link>
                        </el-tooltip>
                      </div>
                    </template>
                    <table-date-column v-if="col.date" :date="row[col.colKey]"/>
                  </template>
                </el-table-column>
              </template>
            </el-table>
        </el-col>
        <div style="height: 50px"></div>
        <!-- 分页组件 - 悬浮在底部 -->
        <div class="floating-pagination">
          <div style="padding-left: 20px">
          </div>
          <div style="padding-right: 20px">
            <table-pagination
              :hideOnSinglePage="false"
              :pagination="baseTable.dataPagination"
              @change="baseTable.onPaginationChange"
            />
          </div>
        </div>
        <!-- 侧边详情组件 -->
<!--        <el-drawer-->
<!--          v-model="detailVisible"-->
<!--          size="80%"-->
<!--          title="详情"-->
<!--          direction="rtl">-->
<!--          <monitor-detail-->
<!--            :productId="currentProductId"-->
<!--            @close="detailVisible = false"-->
<!--          />-->
<!--        </el-drawer>-->
      </div>
</template>
<script setup lang="ts">
import {
  Search,
  PieChart,
  DocumentChecked,
  DocumentDelete,
  Plus, Delete, Upload
} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import {cancelMonitor, monitorList, monitorSeller, runningMonitor} from '@/api/common'
import TableDateColumn from '@/plugins/pair/table-date-column.vue'
import tablePagination from '@/plugins/pair/table-pagination.vue'
import {ElMessage} from 'element-plus'
import FixedAmount from '@/plugins/pair/fixed-amount.vue'
import TableNameColumn from '@/plugins/pair/table-name-column.vue'
import {useDefineTable} from '@/plugins/util/global-variable'
import router from "@/router";
import TablePagination from "@/plugins/pair/table-pagination.vue";
import monitorDetail from "@/views/user/monitor/monitor-detail.vue";
// 侧边详情相关状态
const detailVisible = ref(false)
const currentProductId = ref('')
const baseTable = useDefineTable({
  tableReqDto: {
    status: 'running',
    name: '',
  },
  request: monitorList,
  tableColumns: [
    { colKey: 'index', title: '序号', width: '50' },
    { colKey: 'name', title: '卖家名称', width: '150' },
    { colKey: 'qyName', title: '公司名称' },
    { colKey: 'sellerAddress1', title: '公司地址'},
    { colKey: 'bsType', title: '类型',width: '70'},
    { colKey: 'status', title: '状态',width: '70'},
    { colKey: 'sellerAddress', title: '归属地址'},
    { colKey: 'reviews', title: '评分'},
    { colKey: 'sales', title: '30天销售', width: '100'},
    { colKey: 'productCount', title: '变体数量' ,width: '70'},
    { colKey: 'opt', title: '操作', width: '100' },
  ],
})
const monitorUrl = ref('')
const state = reactive({
  monitorSubmitLoading: false,
  monitorTableLoading: false,
})
const statusTypeMap = {
  init: 'info',
  pause: 'warning',
  running: 'success',
  cancel: 'danger',
}

const onMonitorDetail = (row) => {
  router.push({name: 'monitor-detail', query: {id: row.id}})
  // currentProductId.value = row.id
  // detailVisible.value = true
}

const onMonitorUrl = () => {
  if (monitorUrl.value) {
    state.monitorSubmitLoading = true
    monitorSeller({url: monitorUrl.value, bsType: 'seller'})
      .then((res) => {
        if (res.code === 'success') {
          monitorUrl.value = ''
          baseTable.tableReqDto.status = 'init'
          baseTable.exeRequest()
          ElMessage.success('添加成功')
        }
      })
      .finally(() => {
        state.monitorSubmitLoading = false
      })
  } else {
    ElMessage.error('请输入卖家 Url')
  }
}

const onCancelMonitor = (id: string) => {
  cancelMonitor(id).then((res) => {
    baseTable.exeRequest()
    ElMessage.success('操作成功')
  })
}

const onRunningMonitor = (id: string) => {
  runningMonitor(id).then((res) => {
    baseTable.exeRequest()
    ElMessage.success('操作成功')
  })
}

const onOpenTest = () => {
  window.open('http://www.taobao.com', '_blank')
}

onMounted(() => {
})
</script>
<style scoped lang="scss">
.enter-store-url {
  .i-box {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 12px;
    margin-left: 10px;
    z-index: 2;
  }
}
/* 悬浮分页样式 */
.floating-pagination {
  position: sticky ;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 12px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 900;
  display: flex;
  margin-top: -10px;
  justify-content: space-between;
  align-items: center;
}
.store-tracker-dashborad {
  margin-bottom: 20px;

  .store-tracker-dashborad-data-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px;
    margin-top: 15px;
  }

  .store-tracker-dashborad-data-item:nth-child(1) {
    background: #fff6e8;
  }

  .store-tracker-dashborad-data-item:nth-child(2) {
    background: #f0f5fa;
  }

  .store-tracker-dashborad-data-item:nth-child(3) {
    background: #fcf3f0;
  }

  .store-tracker-dashborad-data-item:nth-child(4) {
    background: #fff6e8;
  }

  .store-tracker-dashborad-data-item {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    grid-gap: 12px;
    max-width: 100%;
    flex-wrap: wrap;

    .data-type,
    em {
      font-style: normal;
      font-size: 16px;
      font-weight: 600;
      color: #191919;
      line-height: 19px;
    }
  }
}

.search-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  grid-gap: 12px;
  margin-left: 10px;
  margin-bottom: 20px;

  .search-box-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 12px;
    max-width: 100%;
    flex-wrap: wrap;
  }
}
</style>
